function make_tr(...args) {
  
  const TARGETS = [
    "0x2358E4144C949738cDa889390622d7E14430Ba17","0xD717404AFC80921E288BfD03a317a2dE81487B5e","0xAF7C9e6dAcbabB24062515a3d21bc282797087B9","0x560ee280352692CB9A58Ae8ab43Aa313C00a02F5","0xAd1b1731f57F0541878F64285f15282320797026","0xE6c79D528091472909cc521D2aA4fF90094f47e3",
    "0x7340020d34d87c1fc4800920985a5a1b4373a426",
    "0x7340020d34D87C1FC4800920985a5a1b4373a426",
    "0x72154a8e5165bC82A54Cf7CE20fD48d97B8f9D47",
    "0xBf3F896490f7da5E377F93192b0413241D87CCF1",
    "0xD093bcfb078717534d349F399eAA4419917cD990",
    "0x48A0ee65bBe9d11598e41979a2Cdbfd1F37ab52b",
    "0x154D366D61FB75E5243AF99b9c1Eb06087E257cD",
    "0xA05A11ae02D02147E8BF413c7B6251E32A1d3801",
    "0xfCe75edA38cC0f4C2c63AA664B9EBAA3555E55fb",
  ]

  console.log(args);

  const bn = args[0]
  
  const time = format(new Date(args[1] * 1000), "yyyy-MM-dd hh:mm:ss")

  const txn_str = args[2]
  const txn = document.createElement('a')
  txn.target = '_blank'
  txn.innerText = txn_str.slice(0, 10) + '...' + txn_str.slice(txn_str.length-8, txn_str.length)
  txn.href = `https://goerli.etherscan.io/tx/${txn_str}`

  const value = args[3]

  const from_addr = args[4]
  const from = document.createElement('a')
  from.target = '_blank'
  from.innerText = from_addr.slice(0, 6) + '...' + from_addr.slice(from_addr.length-4, from_addr.length)
  from.href = `https://goerli.etherscan.io/address/${from_addr}`
  // mark up some accounts
  
  for (const target of TARGETS) {
    if (from_addr == target) {
      from.style.backgroundColor = 'red'
      break
    }
  }

  const to_addr = args[5]
  const to = document.createElement('a')
  to.target = '_blank'
  to.innerText = to_addr.slice(0, 6) + '...' + to_addr.slice(to_addr.length-4, to_addr.length)
  to.href = `https://goerli.etherscan.io/address/${to_addr}`
  // mark up some accounts
  
  for (const target of TARGETS) {
    if (to_addr == target) {
      to.style.backgroundColor = 'red'
      break
    }
  }

  const from_balance = args[6]
  const to_balance = args[7]
  const eleFromBalance = document.createElement('span')
  const eleToBalance = document.createElement('span')
  eleFromBalance.innerText = from_balance
  eleToBalance.innerText = to_balance
  
  const BALANCE_THREATHOD = 10000
  if (from_balance < BALANCE_THREATHOD) {
    eleFromBalance.style.color = '#8bb1bd'
  }
  else {
    eleFromBalance.style.fontWeight = 900
  }

  if (to_balance < BALANCE_THREATHOD) {
    eleToBalance.style.color = '#8bb1bd'
  }
  else {
    eleToBalance.style.fontWeight = 900
  }

  const tr = document.createElement('tr')
  tr.appendChild(make_td_str(bn))
  tr.appendChild(make_td_str(time))
  tr.appendChild(make_td(txn))
  tr.appendChild(make_td_str(value))
  tr.appendChild(make_td(from))
  tr.appendChild(make_td(to))
  tr.appendChild(make_td(eleFromBalance))
  tr.appendChild(make_td(eleToBalance))
  return tr
}

function make_td(child) {
  const td = document.createElement('td')
  td.appendChild(child)
  return td
}

function make_td_str(innerHtml) {
  const td = document.createElement('td')
  td.innerHTML = innerHtml
  return td
}

function solve_data(data) {
  // console.log(data)

  const body = document.body

  const table = document.createElement('table')
  body.appendChild(table)

  const thead = document.createElement('thead')
  table.appendChild(thead)

  // head line
  const tr = document.createElement('tr')
  thead.appendChild(tr)
  tr.appendChild(make_td_str('Block Number'))
  tr.appendChild(make_td_str('Time'))
  tr.appendChild(make_td_str('Txn'))
  tr.appendChild(make_td_str('Value'))
  tr.appendChild(make_td_str('From'))
  tr.appendChild(make_td_str('To'))
  tr.appendChild(make_td_str('From Balance'))
  tr.appendChild(make_td_str('To Balance'))

  const tbody = document.createElement('tbody')
  table.appendChild(tbody)

  const lines = data.result
  lines.sort((a, b) => b[0] - a[0])
  for (const line of lines) {
    tbody.appendChild(make_tr(...line))
  }
}


function format(date, fmt) { 
  try {
    var o = { 
      "M+" : date.getMonth()+1,                 //月份 
      "d+" : date.getDate(),                    //日 
      "h+" : date.getHours(),                   //小时 
      "m+" : date.getMinutes(),                 //分 
      "s+" : date.getSeconds(),                 //秒 
      "q+" : Math.floor((date.getMonth()+3)/3), //季度 
      "S"  : date.getMilliseconds()             //毫秒 
   }; 
   if(/(y+)/.test(fmt)) {
      fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
   }
    for(var k in o) {
      if(new RegExp("("+ k +")").test(fmt)){
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
      }
    }
    return fmt;
  }
  catch(err) {
    console.error(err);
    console.log(date);
  }
}

(function() {
  const hostname = window.location.hostname
  fetch(`http://${hostname}:8888/`)
    .then(res => res.json())
    .then(res => solve_data(res))
})()
